<template>
    <div class="zc-box-header"><h2>应用管理</h2></div>
    <div class="zc-layout-main-body">
        <div class="zc-box-toolbar">
            <el-button type="primary" @click="toCreat" plain>创建应用</el-button>
        </div>
        <CardContainer :apps="app.apps" v-if="app.apps && app.apps.length!==0">
            <template #content="{item}">
                <el-card style="max-width: 480px">
                    <template #header>
                        <div class="card-header">
                            <el-image :src="item.logo" class="zc-company-card-app-logo">
                                <template #error>
                                    <div class="image-slot">
                                        <el-icon>
                                            <icon-picture></icon-picture>
                                        </el-icon>
                                    </div>
                                </template>
                            </el-image>
                            <span>{{ item.name }}</span>
                            <el-tag type="primary" class="zc-company-card-app-tag">开发中</el-tag>
                        </div>
                    </template>
                    <div class="zc-company-card-app-desc">{{
                        item.description ? item.description : '暂无描述'
                        }}
                    </div>
                    <template #footer>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-button :icon="Search" class="btn" @click="toDev(item)">开发</el-button>
                            </el-col>
                            <el-col :span="8">
                                <el-button :icon="Setting" class="btn">设置</el-button>
                            </el-col>
                            <el-col :span="8">
                                <el-button :icon="Delete" class="btn">删除</el-button>
                            </el-col>
                        </el-row>
                    </template>
                </el-card>
            </template>
        </CardContainer>
        <el-empty v-else description="暂无应用"></el-empty>
    </div>
    <AppCreate ref="appRef" @submit="onSubmit"></AppCreate>
</template>
<script type="ts" setup>
import {onMounted, reactive, ref} from "vue";
import AppCreate from './create.vue'
import {listApp} from "@/api/api.app";
import CardContainer from '@/components/card/index.vue'
import {Delete, Picture as IconPicture, Search, Setting} from '@element-plus/icons-vue';
import router from "@/router";
import {company} from "@/utils/core/store";

const appRef = ref();
const app = reactive({
    apps: []
})
const toCreat = () => {
    appRef.value.openDialog();
    console.log(company.value.id);
}

const doLoadData = () => {
    // 涉及数据权限的TODO
    listApp({id: company.value.id}).then(res => {
        app.apps = res.data || [];
    })
}

const toDev = (app) => {
    router.push({name: 'appDesignDomain', params: {companyId: app.companyId, appId: app.id}})
}

const onSubmit = () => {
    doLoadData();
}
onMounted(() => {
    doLoadData();
})
</script>
